<template>
  <div ref="wrapper">
      <slot></slot>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
  name: 'scroll',
  data() {
  	return {}
  },
  props: {
      probeType: { //滚动事件 何时派发滚动事件
        type: Number,
        default: 1
      },
      click: { //是否需要派发事件
        type: Boolean,
        default: true
      },
      listenScroll: {//是否监听滚动条位置 时时监听歌手列表滚动条位子
        type: Boolean,
        default: false
      },
      dataA: { //监听滚动条数据变化 防止滚不动 
         type: Array, 
				 default:null
      },
      pullup: {//上拉刷新
        type: Boolean,
        default: false
      },
      beforeScroll: {//滚动时间 键盘收起
        type: Boolean,
        default: false
      },
      refreshDelay: {//transition-group动画延迟效果
        type: Number,
        default: 20
      }
    },
    mounted() {
      setTimeout(() => { //初始话滚动条的方法
        this._initScroll()
      }, 20)
    },
    methods: {
      _initScroll() {
        if (!this.$refs.wrapper) { //没有的值 就报错
          return
        }
        this.scroll = new BScroll(this.$refs.wrapper, {
          probeType: this.probeType,
          click: this.click
        })

        if (this.listenScroll) {//派发滚动条位子
          let me = this
          this.scroll.on('scroll', (pos) => {
            me.$emit('scroll', pos)
          })
        }

        if (this.pullup) { //是否开启上拉刷新
          this.scroll.on('scrollEnd', () => {
            if (this.scroll.y <= (this.scroll.maxScrollY + 50)) {
              this.$emit('scrollToEnd')
            }
          })
        }

        if (this.beforeScroll) { //失去焦点
          this.scroll.on('beforeScrollStart', () => {
            this.$emit('beforeScroll')
          })
        }
      },
      disable() { //禁用 better-scroll，DOM 事件（如 touchstart、touchmove、touchend）的回调函数不再响应
        this.scroll && this.scroll.disable()
      },
      enable() {//初始化 启用 better-scroll, 默认 开启。
        this.scroll && this.scroll.enable()
      },
      refresh() { //刷新方式
        this.scroll && this.scroll.refresh()
				// console.log("12")
      },
      scrollTo() { //listviwe 字母表中用到
        this.scroll && this.scroll.scrollTo.apply(this.scroll, arguments)
      },
      scrollToElement() {//滚到到相应位子
        this.scroll && this.scroll.scrollToElement.apply(this.scroll, arguments)
      }
    },
    watch: {
     dataA() { //数据发生变化就重新调用刷新方法        
			 setTimeout(() => {
          this.refresh()
        }, this.refreshDelay)
      }
    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus" rel="stylesheet/stylus">

</style>
